<template>
    <div class='body'>
        <div class="main">
            <div class="top">
                <span style="color: tomato;">当前时间：{{ aaa }}(北京时间)</span>
            </div>
            <div class="bom">

                <div class="bomx">
                    <div v-if="imgs" class="names">
                        <span style="margin-right: 15px;">您好，欢迎</span>
                        <img :src="imgs.tou" alt="" style="margin-right: 15px;width: 50px;height: 50px;border-radius: 50%;">
                        <span style="color: red;">{{ imgs.name }}</span>
                        <span>，使用此网站。</span>
                    </div>
                    <p style="color: red;font-size: 20px;margin-top: 25px;">如若不会使用(第一次使用)，请阅读一下规则：</p>
                </div>
                <div class="boms" v-if="qxstore.qx == 'admin'">
                    <p style="color: red;font-size: 20px;">左侧菜单栏是为工作区，需要进行的所有功能都在其中。</p>
                    <ol>
                        <li>个人信息菜单：进行个人基础信息和密码修改。</li>
                        <li>登录日志：此网站所以用户登录时间记录。</li>
                        <li>用户信息：进行对全局用户的账户管控，其添加用户子菜单则是用于增加新的用户。</li>
                        <li>投票信息管理：对所有投票项目进行管控，可进行添加投票项和删除投票和投票项等操作。</li>
                        <li>投票信息：详细查看所有投票信息和统计结果。</li>
                        <li>创建投票：进行投票项目的创建。</li>
                        <li>投票：可查看所有投票，同时可以选择投票进行投票操作。</li>
                    </ol>
                </div>
                <div class="boms" v-if="qxstore.qx == 'uadmin'">
                    <p style="color: red;font-size: 20px;">左侧菜单栏是为工作区，需要进行的所有功能都在其中。</p>
                    <ol>
                        <li>个人信息菜单：进行个人基础信息和密码修改。</li>
                        <li>投票信息管理：对自己创建的投票项目进行管控，可进行添加投票项和删除投票和投票项等操作。</li>
                        <li>投票信息：详细查看所有投票信息和统计结果。</li>
                        <li>创建投票：进行投票项目的创建。</li>
                        <li>投票：可查看所有投票，同时可以选择投票进行投票操作。</li>
                        <p style="color: red;font-size: 20px;">如果使用过程遇到任何问题，可使用左侧在线反馈进行反馈。</p>
                    </ol>
                </div>
                <div class="boms" v-if="qxstore.qx == 'user'">
                    <p style="color: red;font-size: 20px;">左侧菜单栏是为工作区，需要进行的所有功能都在其中。</p>
                    <ol>
                        <li>个人信息菜单：进行个人基础信息和密码修改。</li>
                        <li>投票信息：详细查看所有投票信息和统计结果。</li>
                        <li>创建投票：进行投票项目的创建。</li>
                        <li>投票：可查看所有投票，同时可以选择投票进行投票操作。</li>
                    </ol>
                    <p style="color: red;font-size: 20px;">如果使用过程遇到任何问题，可使用左侧在线反馈进行反馈。</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { infodata, toudata } from '@/api/info/index'
import moment from 'moment';
import { useCountStore } from "@/store/count";
const qxstore = useCountStore()
console.log("qqqqqqq", qxstore.qx);
let imgs = ref()
let aaa: any = ref()
onMounted(() => {
    // infodata().then((res: any) => {
    //     console.log('日志', res)
    //     res.data.forEach((item: any) => {
    //         item.loginTime = moment(item.loginTime).format('YYYY-MM-DD HH:mm:ss'); // 格式化为"年-月-日 时:分:秒"
    //     });
    //     tableData.value = res.data.reverse()
    // })

    // 获取当前时间
    // const loginTime1 = new Date();
    // let aaa = moment(loginTime1).format('YYYY-MM-DD HH:mm:ss');
    // console.log("aaaa", aaa);


    // 测试base64存储
    toudata().then((res: any) => {
        console.log("imgs", res);
        imgs.value = res.data[0]

    })
    gettiem()
})
// 实时时间
let gettiem = () => {
    setInterval(() => {
        const loginTime1 = new Date();
        aaa.value = moment(loginTime1).format('YYYY-MM-DD HH:mm:ss');
    }, 1000)
}
</script>
<style  lang='less'>
.body {
    background-color: rgb(245, 249, 250);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .main {
        width: 80%;
        height: 95%;
        // background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .top {
            width: 100%;
            height: 10%;
            background-color: #fff;
            box-sizing: border-box;
            padding: 10px 0px 10px 25px;
            display: flex;
            align-items: center;
        }

        .bom {
            width: 100%;
            height: 89%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: #fff;
            box-sizing: border-box;
            padding-top: 25px;
            padding-left: 10px;

            .bomx {
                width: 530px;
                height: 120px;
                margin: 0 auto;

                .names {
                    display: flex;
                    align-items: center;
                    font-size: 25px;
                }
            }

            .boms {
                width: 650px;
                height: 500px;
                line-height: 50px;
                margin: 0 auto;
                margin-right: 250px;
            }

        }
    }
}
</style>